<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <!-- <el-col :span="17"> -->
        <!-- 侧边导航 -->
        <el-menu :default-active="activeIndex2" @select="handleSelect">
          <el-menu-item index="/">
            <i class="el-icon-location"></i>
            <span slot="title">demo</span>
          </el-menu-item>
          <el-menu-item index="/echarts">
            <i class="el-icon-menu"></i>
            <span slot="title">echarts</span>
          </el-menu-item>
          <el-menu-item index="/manage">
            <i class="el-icon-setting"></i>
            <span slot="title">admin</span>
          </el-menu-item>
        </el-menu>
        <!-- </el-col> -->
      </el-aside>
      <!-- 内容 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2:"/"
    };
  },
  methods:{
    handleSelect(key,keyPath){
      this.activeIndex2 = key
      this.$router.push(key)
    }
  }
};
</script>

<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
#components-layout-demo-side .logo {
  height: 40px;
  background: #17b3a3;
  color: #fff;
  font-size: 20px;
}
</style>